<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.9.0.js"></script>
    <script src="./echarts.min.js"></script>
    <script>
        function loadData() {
            $.ajax({
                url: 'https://wis.qq.com/weather/common',
                type: 'get',
                data: 'source=pc&weather_type=observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=江苏省&city=南京市&county=',
                dataType: 'jsonp'
            }).done((result)=>{
                console.log('result:', result);
                let forecast_1h = result.data.forecast_1h;

                let xArr = [];
                let dataArr = [];
                for(let key in forecast_1h){
                    let h = forecast_1h[key];
                    let time = h.update_time;
                    let degree = h.degree;

                    // let timeArr = time.split("");
                    // xArr.push(timeArr[8]+timeArr[9]+":00");

                    xArr.push(time);
                    dataArr.push(degree);
                }

                let option = {
                    tooltip: {
                        show: true,
                        formatter: '<h3>时间: {b0}</h3><div>温度: {c0}°C</div>'
                    },
                    xAxis: {
                        // name: "时间",
                        // nameTextStyle: {
                        //     color: 'red',
                        //     overflow: 'truncate',
                        //     width: 10,
                        //     verticalAlign: 'middle'
                        // },
                        // nameRotate: 90,
                        axisLabel: { // 坐标轴 刻度的 标签名
                            rotate: -45,
                            formatter: function (value, index) {
                                let timeArr = value.split("");
                                return timeArr[8]+timeArr[9]+":00";
                            }
                        },
                        type: 'category',
                        data: xArr
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: dataArr,
                        type: 'line',
                        smooth: true
                    }]
                };
                let cd = echarts.init(document.getElementById("d1"));
                cd.setOption(option);

            });
        }
        $(loadData);
    </script>
</head>
<body>
    <div id="d1" style="width: 2000px;height: 500px;" ></div>
</body>
</html>